<template>
  <div class="body_analysis">
    <report-card :titleList="['fat_analysis_1001', 'fat_analysis_1001']" :pageNum="2">
      <div slot="firstPage" class="left">
        <div class="table">
          <div class="head flex">
            <div class="item head_empty1"></div>
            <div class="item head_item status_lower_colors flex-center-center">
              {{ i18n.t('lower_standard') }}
            </div>
            <div class="item head_item status_standard_colors flex-center-center">
              {{ i18n.t('standard') }}
            </div>
            <div class="item head_item status_higher_colors flex-center-center">
              {{ i18n.t('higher_standard') }}
            </div>
            <div class="item head_empty2"></div>
          </div>
          <div class="left_chart" v-for="item in computedReportItems" :key="item.id">
            <div class="item left_chart_name">
              {{ item.name }}({{ item.unit }})
            </div>
            <div class="item left_chart_main align-items-center">
              <div
                class="left_chart_bar"
                v-for="(level, index) in item.levels"
                :key="level.color"
                :style="{
                  background: level.color,
                  width:
                    index < item.levelIndex
                      ? '33.33%'
                      : index === item.levelIndex
                      ? minLevelProcess(item.levelProgress) + '%'
                      : 0,
                }"
              >
              </div>
              <!-- {{item.levelIndex}} -->
            </div>
            <div
              class="item"
              :class="item.id === 'Muscle' ? 'left_chart_value_muscle' : 'left_chart_value'"
            >
              <p :class="item.id === 'Muscle' ? 'muscle_value' : ''">
                {{ item.value }}
              </p>
              <p v-if="item.id === 'Muscle'" class="muscle_percent">({{ measureData.muscle }}%)</p>
            </div>
          </div>
        </div>
      </div>
      <div slot="lastPage" class="right flex">
        <div class="chart_analy">
          <div class="title justify-content-center">
            <div class="titleText">
              {{ i18n.t(bodyTypeWeight) }} · {{ i18n.t(bodyType) }}
              <div class="bar-shadow"></div>
            </div>
          </div>
          <div class="table">
            <div class="head">
              <div class="item head_empty1"></div>
              <div class="item head_item status_lower_colors">{{ i18n.t('base_1030') }}</div>
              <div class="item head_item status_standard_colors">{{ i18n.t('base_1031') }}</div>
              <div class="item head_item status_higher_colors">{{ i18n.t('base_1032') }}</div>
            </div>
            <div class="fat" v-for="item in computedReportItems" :key="item.id">
              <div class="item name">{{ item.name}}</div>
              <div class="item chart align-items-center">
                <div
                  class="bar"
                  v-for="(level, index) in item.levels"
                  :key="level.color"
                  :style="{
                    background: level.color,
                    width:
                      index < item.levelIndex
                        ? '33.33%'
                        : index === item.levelIndex
                        ? minLevelProcess(item.levelProgress) + '%'
                        : 0,
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <div class="analysis_suggestions">
          <div>
            <p class="suggestions_head">{{ i18n.t('fat_analysis_1025') }}:</p>
            <p class="suggestions_text">{{ i18n.t(analysisText) }}</p>
          </div>
          <div class="suggestions">
            <div class="suggestions_head">{{ i18n.t('fat_analysis_1026') }}:</div>
            <p class="suggestions_text">{{ i18n.t(suggestionText) }}</p>
          </div>
        </div>
      </div>
    </report-card>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import ReportCard from './reportCard/index.vue'
import MyBarChartForBody from './MyBarChartForBody.vue'
import MyTag from './MyTag.vue'
import {  MuscleBodyfatAnalysis } from '@/assets/ts/eight_electrodes_report/Consts'
import { muscleAnalysisData } from '@/assets/ts/eight_electrodes_report/Util'
import { calcUnitValue, calcUnit } from '@/assets/ts/eight_electrodes_report/Util'
import getMeasureData, { consts, ReportItem } from '@yolanda-qn/eight-electrodes-report-lib'
import { TypedScaleData, TypedConfig } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'

@Component({ components: { ReportCard, MyBarChartForBody, MyTag } })
export default class extends Mixins() {
  @Prop() measureData!: TypedScaleData
  @Prop() weight_unit!: consts.WeightUnitEnum
  @Prop() config!: TypedConfig

  analysisText = ''
  suggestionText = ''
  bodyType = ''
  bodyTypeWeight = ''
  pickReports: Array<ReportItem> = []
  calcUnitValue: Function = calcUnitValue
  calcUnit: Function = calcUnit
  
  get computedReportItems() {
    return this.pickReports.map((item) => item.toObject());
  }

  mounted() {
    this.getReportDetail()
    this.measureData.muscle = +Number(this.measureData.muscle).toFixed(1)
  }

  // 小于最小值则显示5%，这样至少会显示一个进度，对于用户来说视觉上会好看点
  minLevelProcess(levelProcess: number) {
    if (levelProcess <= 0) {
      return 5;
    }

    return levelProcess;
  }

  getReportDetail() {
    const ReportIdsMapping = consts.ReportBuilderIdsEnum
    const pickReports = getMeasureData(this.measureData,{
      ...this.config,
      builderIds:[
         ReportIdsMapping.Weight,
        ReportIdsMapping.BodyfatMass,
        ReportIdsMapping.MuscleMass,
      ]
    })
    this.pickReports = pickReports
    this.getAnalysisSuggestion()
  }
  getAnalysisSuggestion() {
    const pickReports = this.pickReports
    const weightLevelIndex = pickReports[0].getLevelIndex()
    const bodyfatLevelIndex = pickReports[1].getLevelIndex()
    const muscleLevelIndex = pickReports[2].getLevelIndex()
    let MuscleBodyfatAnalysisType = 6 // 默认健康
// 体重超标准
if (weightLevelIndex === 2) {
      // 脂肪 > 1骨骼肌 超体重·虚弱型
      if (bodyfatLevelIndex - muscleLevelIndex === 1) {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.OVER_WEIGHT_WEAK;
      }
      // 脂肪 > 2骨骼肌 超体重·肥胖型
      if (bodyfatLevelIndex - muscleLevelIndex === 2) {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.OVER_WEIGHT_FAT;
      }
      // 脂肪 < 骨骼肌 超体重·肌肉型
      if (bodyfatLevelIndex < muscleLevelIndex) {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.OVER_WEIGHT_MUSCLE;
      }
      // 脂肪 === 骨骼肌
      if (bodyfatLevelIndex === muscleLevelIndex) {
        // 骨骼肌 = 高标准 超体重.肥胖型
        if (muscleLevelIndex === 2) {
          MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.OVER_WEIGHT_FAT;
        } else {
          // 其他 超体重.虚弱型
          MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.OVER_WEIGHT_WEAK;
        }
      }
      // 体重标准
    } else if (weightLevelIndex === 1) {
      // 脂肪 > 1骨骼肌 超体重·虚弱型
      if (bodyfatLevelIndex - muscleLevelIndex === 1) {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.STANDARD_WEIGHT_WEAK;
      }
      // 脂肪 > 2骨骼肌 超体重·肥胖型
      if (bodyfatLevelIndex - muscleLevelIndex === 2) {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.STANDARD_WEIGHT_FAT;
      }
      // 脂肪 < 骨骼肌 超体重·肌肉型
      if (bodyfatLevelIndex < muscleLevelIndex) {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.STANDARD_WEIGHT_MUSCLE;
      }
      // 脂肪 === 骨骼肌 标准体重.健康型
      if (bodyfatLevelIndex === muscleLevelIndex) {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.STANDARD_WEIGHT_HEALTH;
      }
      // 体重低标准
    } else if (weightLevelIndex === 0) {
      // 脂肪 >= 骨骼肌 低体重.虚弱型
      if (bodyfatLevelIndex >= muscleLevelIndex) {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.LOW_WEIGHT_WEAK;
        // 其他 低体重.肌肉型
      } else {
        MuscleBodyfatAnalysisType = MuscleBodyfatAnalysis.LOW_WEIGHT_MUSCLE;
      }
    }
    const muscleAnalysis = muscleAnalysisData(MuscleBodyfatAnalysisType)
    this.analysisText = muscleAnalysis.analysis
    this.suggestionText = muscleAnalysis.suggestion
    this.bodyType = muscleAnalysis.bodyType
    this.bodyTypeWeight = muscleAnalysis.bodyTypeWeight
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.left {
  padding: rem(20) rem(24) rem(29) rem(24);
  .table {
    background-color: $primaryBg;
    .item {
      border: rem(2) solid #fff;
    }
    .head {
      .head_empty1 {
        width: rem(171);
      }
      .head_item {
        flex: 1;
        text-align: center;
        font-size: rem(22);
        font-weight: 500;
        padding: rem(10) 0;
      }
      .head_empty2 {
        width: rem(123);
      }
    }
    .left_chart {
      display: flex;
      .left_chart_name {
        width: rem(171);
        font-size: rem(22);
        color: #2a2e31;
        padding: rem(10) 0 rem(10) rem(12);
        display: flex;
        align-items: center;
        word-break: break-all;
      }
      .left_chart_name:nth-child(2) {
        line-height: rem(70);
      }
      .left_chart_main {
        flex: 1;
        .left_chart_bar {
          height: rem(12);
        }
      }
    }
    .left_chart_value {
      width: rem(123);
      font-size: rem(24);
      color: #303133;
      line-height: rem(70);
      text-align: center;
    }
    .left_chart_value_muscle {
      width: rem(123);
      text-align: center;
      padding-top: rem(8);
    }
    .muscle_value {
      font-size: rem(24);
      color: #303133;
      line-height: rem(33);
    }
    .muscle_percent {
      font-size: rem(20);
      color: #909090;
      line-height: rem(28);
      margin-top: rem(-4);
    }
  }
}

.right {
  padding: rem(9) rem(24) rem(51) rem(24);
  .chart_analy {
    .title {
      height: rem(58);
      background: #f6f7f8;
      margin-bottom: rem(20);
      padding-top: rem(12);

      .titleText {
        height: rem(37);
        font-size: rem(26);
        position: relative;
        font-weight: 500;
        width: fit-content;
        border-bottom: rem(11) solid rgba(79, 177, 251, 0.3);
        padding-top: rem(5);
      }
    }
    .table {
      width: rem(268);
      background-color: rgba(246, 247, 248, 1);
      .item {
        box-sizing: border-box;
        border: rem(1.5) solid #fff;
      }
      .head {
        display: flex;
        // height: rem(40);
        .head_empty1 {
          width: rem(96);
        }
        .head_item {
          width: rem(60);
          text-align: center;
          // line-height: rem(40);
          font-size: rem(22);
          font-weight: 500;
          word-break: break-all;
        }
        .head_empty2 {
          width: rem(123);
        }
      }
      .weight,
      .fat,
      .skeletal {
        display: flex;
      }
      .name {
        width: rem(96);
        padding-left: rem(12);
        font-size: rem(20);
        color: #2a2e31;
        padding: rem(10) 0 rem(10) rem(12);
          word-break: break-all;
      }
      .chart {
        width: rem(180);
        .bar {
          background: rgba(79, 177, 251, 1);
          height: rem(12);
        }
      }
    }
  }
}
.analysis_suggestions {
  margin-left: rem(34);
  width: rem(340);
  .suggestions {
    margin-top: rem(24);
  }
  .suggestions_head {
    font-size: rem(22);
    line-height: rem(30);
    font-weight: 500;
    color: #303133;
    padding-left: rem(20);
    position: relative;
    &::before {
      position: absolute;
      display: block;
      content: '';
      width: rem(10);
      height: rem(10);
      background-color: rgba(45, 198, 250, 1);
      border-radius: rem(5);
      top: 0;
      bottom: 0;
      margin: auto;
      left: 0;
    }
  }
  .suggestions_text {
    margin-top: rem(8);
    font-weight: 400;
    color: #909090;
    line-height: rem(30);
    font-size: rem(22);
  }
}
</style>